<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<!-- 分页显示演示开始 -->
<script>
	
</script>
<style>
<!--
.tab {
	margin-bottom: 0px;
	margin-top: 6px;
}

.tab>li>a {
	line-height: 22px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.tab-content {
	border: 1px solid #E3E3E3;
	border-radius: 0px 0px 4px 4px;
	border-top: none;
	padding: 2px;
}

.table [valign="top"] {
	vertical-align: top;
}

#batch div[id^=m] {
	background-color: #FFFFFF;
	border: 1px solid #E3E3E3;
	border-radius: 4px;
	margin: 2px;
	padding: 2px;
	line-height: 25px;
	float: left;
	width: 45%;
	min-height: 225px;
}

#batch div[id^=m] span {
	float: left;
}

.title {
	width: 60px;
	margin-left: 20px;
}

#batch #mGoods {
	width: 98%;
	min-height: 25px;
	max-height: 200px;
	overflow-y: auto;
	padding: 5px;
}

#goodsQr {
	min-height: 40px;
	width: 80%;
}

#memo {
	width: 99%;
}
-->
</style>
<ul class="nav nav-tabs tab tBlock">
	<li class="active">
		<a deny="not" class="nFocus" href="#batch" data-toggle="tab">
			<i class="icon-tags"></i>
			商品批量入库
		</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="batch">
		<form id="inputForm" class="well form-inline" action="${ctx}/adoms/goods/batchIn" method="post">
			<table class="table table-striped table-bordered table-condensed">
				<tr>
					<td class="span2" valign="top">
						商品二维码:
						<br />
						<span class="tBlue">(扫描输入一个二维码)</span>
					</td>
					<td>
						<input type="text" name="goodsQr" id="goodsQr" class="span6" />
						<span id="clearBtn" class="btn btn-small btn-primary">清 空</span>
					</td>
				</tr>
				<tr>
					<td class="span2">待入库货物列表:</td>
					<td>
						<div id="mGoods" class="tBlue">
							<div id="qrBar"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="span2">请选择商品:</td>
					<td>
						<select id="marchandise" name="marchandise.id">
							<c:forEach items="${mList }" var="m" varStatus="index">
								<option value="${m.id }">${index.index + 1}.${m.name }</option>
							</c:forEach>
						</select>
						已成功扫描:
						<span class="tRed" id="counter">0</span>
						条记录
					</td>
				</tr>
				<tr>
					<td class="span2" valign="top">商品详情:</td>
					<td>
						<c:forEach items="${mList }" var="m">
							<div class="hide" id="m${m.id }">
								<span class="title">商品名称：</span>
								<span class="span3">${m.name }</span>
								<br />
								<span class="title">商品编号：</span>
								<span class="span3">${m.code }</span>
								<br />
								<span class="title">单价：</span>
								<span class="span3 tBlue">￥${m.price } 元</span>
								<br />
								<span class="title">规格：</span>
								<span class="span3 tBlue">${m.spcification }</span>
								<br />
								<span class="title">包装：</span>
								<span class="span3 tBlue">${m.packageing }</span>
								<br />
								<span class="title">商品条码：</span>
								<span class="span3">${m.barCode }</span>
								<br />
								<span class="title">品牌：</span>
								<span class="span3">${m.brand.name }</span>
								<br />
								<span class="title">产地：</span>
								<span class="span3">${m.producePlace }</span>
								<br />
								<span class="title">生产日期：</span>
								<span class="span3">${m.produceDate }</span>
								<br />
								<span class="title">保质期：</span>
								<span class="span3">${m.shelflife }</span>
								<br />
								<span class="title">商品描述：</span>
								<span class="span3">${m.description }</span>
								<br />
							</div>
						</c:forEach>
					</td>
				</tr>
				<tr>
					<td>所属部门:</td>
					<td>
						<select id="department" name="department.id">
							<option value="${USER.department.id}">${USER.department.name}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>状态:</td>
					<td>
						<input id="state" name="state" type="hidden" value="待售" size="30" maxlength="80" />
						<span class="tBlue">待售</span>
					</td>
				</tr>
				<tr>
					<td>备注:</td>
					<td>
						<textarea id="memo" name="memo" rows="4" class="span6"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input class="btn span2 btn-primary" disabled="disabled" type="button" id="inSubmit" value="批量入库" />
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<script>
	$(function() {
		$("#inputForm").validate({
			rules : {
				"marchandise.id" : "required",
				"department.id" : "required",
				"qrCode.id" : "required",
				memo : "required"
			}
		});
		$("#marchandise").change(function() {
			$("div[id^=m]:not([id^=mG])").hide();
			var mid = $(this).val();
			$("#m" + mid).show();
		}).change();
		$("#inSubmit").click(function() {
			$("#inputForm").submit();
		});
		$("#goodsQr").on("keyup blur", function(e) {
			var keyCode = e.keyCode;
			if (!keyCode || keyCode == 13) {
				var val = $.trim($("#goodsQr").val());
				var html = $("#qrBar").html();
				if (html.indexOf("(" + val + ")") < 0) {
					if (val) {
						$.post("${ctx}/adoms/qrGoodsCode/getGoodsByGCode", {
							qrCode : val
						}, function(data) {
							var flag = "<span style='color:red;'>(" + val + ") - 无效</span>";
							if (data) {
								var counter = parseInt($("#counter").html()) + 1;
								$("#counter").html(counter);
								flag = "No." + counter + " - " + data.wCode + " - (" + val + ") - 有效<input type='hidden' name='qrid' value='" + data.id + "'/>";
								$("#inSubmit").removeAttr("disabled");
							}
							$("#qrBar").prepend(flag + "<br/>");
							$("#mGoods").show();
							$("#goodsQr").val("").focus();
						}, "json");
					}
				} else {
					msgAlert.show(val + " 已经存在！");
					$(this).val("").focus();
				}
			}
			return false;
		});
		$("#clearBtn").click(function() {
			$("#goodsQr").val("");
			$("#qrBar").html("");
			$("#inSubmit").attr("disabled", "disabled");
			$("#counter").html(0); //计数器
		});
	});
</script>
<c:if test="${msg != null}">
	<script>
		msgAlert.show("${msg}");
	</script>
</c:if>